<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <script src="bootstrap/jquery.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div class="container" v-cloak>
    <h2 class="text-center">添加用户</h2>
    <form class="form-horizontal">
        <div class="form-group">
            <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
            <div class="col-sm-6">
                <input type="text" id="name" class="form-control" placeholder="请输入姓名" v-model.trim="user.name">
            </div>
        </div>
        <div class="form-group">
            <label for="age" class="control-label col-sm-2 col-sm-offset-2">年龄：</label>
            <div class="col-sm-6">
                <input type="text" id="age" class="form-control" placeholder="请输入年龄" v-model.number="user.age">
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱：</label>
            <div class="col-sm-6">
                <input type="text" id="email" class="form-control" placeholder="请输入邮箱" v-model.trim="user.email">
            </div>
        </div>
        <div class="form-group text-center">
            <input type="button" value="添  加" class="btn btn-primary" :disabled="!user.name||!user.age||!user.email" @click="addUser()"> &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重  置" class="btn btn-primary">
        </div>
    </form>
    <hr>

    <table class="table table-bordered table-hover">
        <caption class="h3 text-center text-info">用户列表</caption>
        <thead>
            <tr class="text-danger">
                <th class="text-center"><input type="checkbox" v-model="checkAll" @change="changeAll()"> 全选</th>
                <th class="text-center">序号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">年龄</th>
                <th class="text-center">邮箱</th>
                <th class="text-center">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="text-center" v-for="(user,index) in users">
                <td><input type="checkbox" v-model="user.state" @change="checkItem()"></td>
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.email}}</td>
                <td>
                    <button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex=index">删除</button>
                </td>
            </tr>
            <tr class="text-center" v-show="users.length!=0">
                <td>
                    <button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex=-2">多选删除</button>
                </td>
                <td colspan="4"></td>
                <td>
                    <button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex=-1">删除全部</button>
                </td>
            </tr>
            <tr v-show="users.length==0" class="text-center text-muted">
                <td colspan="6">
                    <p>暂无数据....</p>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 模态框 -->
    <div class="modal fade" role="dialog" id="del">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">提示信息</h4>
                </div>
                <div class="modal-body text-center">
                  <p v-show="nowIndex!=-1&&nowIndex!=-2">确认要删除 {{users[nowIndex]?users[nowIndex].name:''}} 吗？</p>
                  <p v-show="nowIndex==-1">确认要删除所有用户吗？</p>
                  <p v-show="nowIndex==-2">确认要删除选中的用户吗？</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary" data-dismiss="modal" @click="deleteUser()">确认</button>
                </div>
              </div>
            </div>
          </div>
</div>
</body>
<script>
    new Vue({
        el:'.container',
        data:{
            users:[
                {
                    name:'tom',
                    age:24,
                    email:'tom@sina.com'
                },
                {
                    name:'jack',
                    age:26,
                    email:'jack@qq.com'
                }
            ],
            user:{

            },
            nowIndex:-1,
            checkAll:false // 是否选中全选
        },
        methods: {
            addUser(){
                this.users.push(this.user);
                this.user={}; // 添加后重置为空

                this.checkItem(); // 重新判断选中的项
            },
            deleteUser(){
                if(this.nowIndex==-1){ // 删除所有
                    this.users=[];
                }else if(this.nowIndex==-2){ // 删除选中的用户
                    this.users=this.users.filter(function(user){
                        return !user.state; // state为false的用户会被保留下来
                    });
                }else{
                    this.users.splice(this.nowIndex,1); // 从指定索引位置开始删除，删除一个
                }

                this.checkItem();
            },
            changeAll(){
                for(let i in this.users){
                    this.users[i].state=this.checkAll;
                }
            },
            checkItem(){
                this.checkAll=true;
                for(let i in this.users){
                    if(!this.users[i].state){
                        this.checkAll=false;
                        return;
                    }
                }
            }
        },
    });
</script>
</html>